# Meter

<Subtitle>A graphical display of a numeric value within a range.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React meter component that provides a graphical display of a numeric value."
/>

import { DemoMeterHero } from './demos/hero';

<DemoMeterHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Meter } from '@base-ui-components/react/meter';

<Meter.Root>
  <Meter.Label />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
  <Meter.Value />
</Meter.Root>;
```

## API reference

<Reference component="Meter" parts="Root, Track, Indicator, Value, Label" />
